<template>
  <view class="flex flex-column oh" style="max-height: 100vh;">
    <view>
      <u-navbar title="维修记录" :background="{ backgroundColor: '#9CE0FF' }" :border-bottom="false" title-color="#000"
        title-size="37" />

      <view class="flex p-lr-40 flex-column justify-between" id="container"
        :style="{ maxHeight: `calc(100vh - ${top+1}px)`, minHeight: `calc(100vh - ${top+1}px)` }">
        <view class="oys">
          <!--拍照模块-->
          <view v-if="true" class="mb-30 mt-20">
            <text class="fz-32 color-333333 lh-45 font-bold">拍照</text>
            <view class="flex flex-wrap">
              <!-- 图片缩略图 -->
              <view class="relative mr-30 mt-20" v-for="(item, index) in photoFiles" :key="index">
                <image class="h-150 w-150" :data-cur="item.url" :src="item.url" @tap="previewImage" />
                <!--  移除图片的按钮  -->
                <view class="absolute delBtn top-0 right-0" @tap.stop="removeImage(index)">
                  <image class="h-50 w-50" src="@/static/images/workList/delPhoto.png" />
                </view>
                <!-- 图片未上传标识 -->
                <view v-if="!item.ossId" class="absolute top0 bottom0 h-150 w-150 bg-00000060 color-fff fz-20 flex align-center justify-center" @tap="previewImage" :data-cur="item.url">
                  <image
                      class="h-24 w-24 mr-4"
                      src="@/static/images/common/download.png"
                  />
                  <text>已缓存</text>
                </view>
              </view>
              <view v-if="photoFiles.length < 6" class="h-150 w-150 mt-20 bg-CCCCCC flex align-center justify-center"
                @tap="uploadImage()">
                <image class="h-50 w-50" src="@/static/images/workList/camera.png"></image>
              </view>
            </view>
          </view>

          <!-- 维修内容 -->
          <view class="mb-30 ">
            <text class="fz-32 color-FF6262">*</text>
            <text class="fz-32 color-333333 lh-45 font-bold">维修内容</text>
            <view class="border-CCCCCC w-full p-tb-20 pl-10 flex min-h-240 mt-10">
              <textarea class="flex1 min-h-200 color-000000" v-model="workOrderInfo.content" @input="fixContentInput" auto-height
                placeholder="请输入维修内容" placeholder-style="color:#CCCCCC;font-size:30rpx" maxlength="200"
                :show-confirm-bar="false" />
            </view>
          </view>

          <!-- 备件更换 -->
          <view class="mb-30 flex align-center justify-between">
            <text class="fz-32 color-333333 lh-45 font-bold">备件更换</text>
            <view class="h-60 w-132 br-5 border-2D8CF0 fz-28 color-fff lh-60 text-center bg-2D8CF0 " @tap="chooseSpare">
              <text>选择备件</text>
            </view>
          </view>

          <u-collapse ref="uCollapse" :accordion="false" :head-style="{ marginBottom: 30 + 'rpx' }">
            <collapse-item @collapseDone="collapseDone(index)" v-for="(item, index) in middleRecordPartList" :key="index"
              :ref="'collapse' + index">
              <template slot="title">
                <view class="lh-45 flex justify-between align-center">
                  <view class="color-333333 font-bold fz-30 lh-45 flex">
                    <view class="max-w-420 break-all">-{{ item.partName }}</view>
                    <text class="pl-115">{{ `x${ (item.partList ? item.partList.length+item.operNum : item.operNum)}` }}</text>
                  </view>
                </view>
              </template>

              <view class="bg-gray br-5 p-20">
                <view class="flex align-center fz-28 color-333">
                  非条形码更换
                  <view class="ml-70 border-888888 color-888888 flex h-40 align-center text-center lh-38">
                    <view class="w-40 border-right-888 h-40" @tap="down(item)">-</view>
                    <view class="w-80">{{ item.operNum }}</view>
                    <view class="w-40 border-left-888 h-40" @tap="up(item)">+</view>
                  </view>
                </view>
                <view v-if="item.isUniqueCode" class="fz-28 align-center mt-20 mb-40 color-333">
                  条形码更换<text class="pl-100 color-888888">{{ item.partList ? item.partList.length:0 }}</text>
                </view>

                <view v-if="item.isUniqueCode" class="mb-20 bg-fff br-10">
                  <view class="p-tb-20 p-lr-10 relative" v-for="(part, cIdx) in item.partList" :key="cIdx">
                    <view class="absolute top-20 right-20" @tap="removeSpareCode(cIdx,item,index)">
                      <u-icon name="close" size="24" color="#888888"></u-icon>
                    </view>
                    <view class="w-130 h-60 lh-60 text-center br-30 bg-FF9900 color-fff fz-28">
                      <text>{{ '-备件' + (cIdx + 1) }}</text>
                    </view>
                    <view class="flex align-center pl-6 mt-20 fz-26 justify-between">
                      <view @tap="scanOld(part)">
                        <uni-icons type="scan" size="30"></uni-icons>
                      </view>
                      <view class="p-lr-28">旧条形码</view>
                      <view class="border-CCCCCC br-10 h-56 flex align-center pl-14 flex1 mr-20">
                        <u-input v-model="part.oldSpareBarcode" placeholder="点击输入条形码" />
                      </view>
                    </view>
                    <view class="flex align-center pl-6 fz-26 mt-12 justify-between">
                      <view @tap="scanNew(part)">
                        <uni-icons type="scan" size="30"></uni-icons>
                      </view>
                      <view class="p-lr-28">新条形码</view>
                      <view class="border-CCCCCC br-10 h-56 flex align-center pl-14 flex1 mr-20">
                        <u-input v-model="part.newSpareBarcode" placeholder="点击输入条形码" />
                      </view>
                    </view>
                  </view>
                </view>

                <view v-if="item.isUniqueCode" @tap="addSpareCode(index,item)">
                  <u-icon name="plus" size="30" color="#1582F5"></u-icon>
                  <text class="color-1582F5 fz-30 pl-7">
                    新增
                  </text>
                </view>

              </view>
            </collapse-item>
          </u-collapse>
        </view>
        <view class="flex align-center justify-center fz-30 sticky bottom0 bg-fff h-235">
          <view class="w-250 h-80 br-10 bg-fff color-19BE6B border-19BE6B text-center lh-80 " @tap="hangup">
            <text>挂起订单</text>
          </view>
          <view class="w-250 h-80 br-10 bg-19BE6B color-fff text-center lh-80 ml-50" @tap="fixDone">
            <text>维修完成</text>
          </view>
        </view>
      </view>
    </view>

    <view class="fixed bottom-200 right-16 z-99">
      <view class="w-88 h-88 mb-20 bg-fff tool flex align-center justify-center" @tap="helpOpen">
        <image class="min-w-40 w-40 h-40" src="@/static/images/repair/help.png"></image>
      </view>
      <view class="w-88 h-88 mb-20 bg-fff tool flex align-center justify-center" @tap="transferOpen">
        <image class="min-w-40 w-40 h-40" src="@/static/images/repair/transfer.png"></image>

      </view>
      <view class="w-88 h-88 bg-fff tool flex align-center justify-center" @tap="fixBookOpen">
        <image class="min-w-40 w-40 h-40" src="@/static/images/repair/fix-book.png"></image>
      </view>
    </view>

      <!--图片上传中模态框-->
      <!-- #ifndef MP-WEIXIN -->
      <u-modal border-radius="20" :show-confirm-button="false" :show-title="false" v-model="isUploading">
        <view class="h-200 flex flex-column align-center justify-center font-bold color-888888 lh-33 bg-fff">
          <text class="mb-10">图片上传中</text>
          <u-loading mode="circle"></u-loading>
        </view>
      </u-modal>
      <!-- #endif -->

      <!--微信小程序使用cover-view解决textarea层级过高问题-->

      <!-- #ifdef MP-WEIXIN -->
      <cover-view class="fixed top0 w-full min-100vh bg-00000060 flex align-center justify-center z-999"
        v-show="isUploading" @touchmove.stop.prevent="">
        <cover-view class="h-200 w-600 br-20 text-center lh-200 font-bold color-888888 lh-33 bg-fff">
          图片上传中
        </cover-view>
      </cover-view>
      <!-- #endif -->

      <!--图片加水印画板-->
      <canvas class="absolute top-99999" v-if="windowWidth !== 0 && windowHeight !== 0"
        :style="{ 'width': `${windowWidth}px`, 'height': `${windowHeight}px` }" :canvas-id="`mycanvas`">
      </canvas>


      <u-mask :show="isShowMask" :mask-click-able="false">
        <view class="flex justify-center align-center h-full color-fff fz-32 font-bold">
          <text>提交中...</text>
          <u-loading mode="circle"></u-loading>
        </view>
      </u-mask>

      <!--求助模态框-->
      <u-modal v-model="helpModuleShow" :show-confirm-button="false" :show-title="false" border-radius="20" z-index="999"
        :zoom="false">
        <view class="flex flex-column align-center p-lr-20">

          <view class="w-full text-center lh-116 fz-40 font-bold color-333333"
            :class="{ 'border-bottom-CCCCCC': !helpSecondStatus }">
            <text>{{ !helpSecondStatus ? "求助原因" : "提示" }}</text>
          </view>

          <view class="border-bottom-CCCCCC w-full p-tb-10 p-lr-20 flex"
            :class="{ 'min-h-220': !helpSecondStatus, 'pb-50': helpSecondStatus }">
            <textarea v-if="!helpSecondStatus" class="flex1 min-h-200 color-000000" v-model="helpDetail" @input="helpInput"
              auto-height placeholder="请输入求助原因" placeholder-style="color:#CCCCCC;font-size:30rpx" maxlength="200"
              :show-confirm-bar="false" />
            <text v-else class="text-center">提交求助后该工单将回退给驻点经理，请确认是否发起求助！</text>
          </view>

          <view class="flex align-center justify-center mb-40 mt-40">
            <view class="border-2D8CF0 w-120 h-60 border-box color-2D8CF0 fz-28 text-center lh-60 br-5 mr-50"
              @tap="helpClose">
              <text>取消</text>
            </view>
            <view v-if="!helpSecondStatus" class="bg-2D8CF0 w-120 h-60 color-fff fz-28 text-center lh-60 br-5"
              @tap="helpCommit">
              <text>提交</text>
            </view>
            <view v-else class="bg-2D8CF0 w-120 h-60 color-fff fz-28 text-center lh-60 br-5" @tap="helpConfirm">
              <text>确定</text>
            </view>
          </view>
        </view>
      </u-modal>

      <!--手册模态框-->
      <u-modal v-model="fixBookModuleShow" :show-confirm-button="false" :show-title="false" border-radius="20"
        z-index="999" :zoom="false">
        <view class="flex flex-column align-center p-lr-20">
          <view class="border-bottom-CCCCCC w-full text-center lh-116 fz-40 font-bold color-333333">
            <text>维修手册</text>
          </view>

          <view class="border-bottom-CCCCCC w-full p-20 flex min-h-220">
            <view class="fz-30 color-888888">
              <text>{{ workOrderInfo.handbook }}</text>
            </view>
          </view>

          <view class="flex align-center justify-center mb-40 mt-40">
            <view class="border-2D8CF0 w-120 h-60 border-box color-2D8CF0 fz-28 text-center lh-60 br-5"
              @tap="fixBookCancel">
              <text>关闭</text>
            </view>
          </view>
        </view>
      </u-modal>

      <!--转交模态框-->
      <u-modal v-model="transferModuleShow" :show-confirm-button="false" :show-title="false" border-radius="20"
        z-index="10" :zoom="false">
        <view class="flex flex-column align-center p-lr-20">
          <view class=" w-full text-center lh-116 fz-40 font-bold color-333333">
            <text>提示</text>
          </view>

          <view class="border-bottom-CCCCCC w-full pt-10 p-lr-20 flex pb-50 fz-30 color-333 text-center">
            转交成功后将把该工单转移到指定工程师手中，请确认是否转移该工单！
          </view>

          <view class="flex align-center justify-center mb-40 mt-40">
            <view class="border-2D8CF0 w-120 h-60 border-box color-2D8CF0 fz-28 text-center lh-60 br-5 mr-50"
              @tap="transferCancel">
              <text>取消</text>
            </view>
            <view class="bg-2D8CF0 w-120 h-60 color-fff fz-28 text-center lh-60 br-5" @tap="transferConfirm">
              <text>确定</text>
            </view>
          </view>
        </view>
      </u-modal>

    <!-- 提交数据load -->
    <u-mask :show="isShowMask" :mask-click-able="false">
      <view class="flex justify-center align-center h-full color-fff fz-32 font-bold">
        <text>{{ tipContent }}</text>
        <u-loading mode="circle"></u-loading>
      </view>
    </u-mask>

    <!-- 数据未填提示 -->
    <u-modal border-radius="20" :show-confirm-button="false" :show-title="false" mask-close-able v-model="errorShow">
      <view class="h-150 flex align-center justify-center font-bold">
        <image class="mr-20 w-38 h-38" src="@/static/images/mine/error.png"></image>
        <text class="fz-30 color-333333 err-text">{{ errorContent }}</text>
      </view>
    </u-modal>

    <!--是否使用本地缓存弹窗-->
    <u-modal v-model="isUseCacheModal" :show-confirm-button="false" :show-title="false" border-radius="20"
            mask-close-able>
      <view class="w-full flex flex-column align-center p-lr-50">
        <view class="lh-center color-333 fz-30 fw-700 p-tb-42 border-bottom-CCCCCC w-full">本地有缓存数据，是否使用？</view>
        <view class="flex align-center justify-center m-tb-50">
          <view class="border-2D8CF0 w-120 h-60 border-box color-fff bg-2D8CF0 fz-28 text-center lh-60 br-5 mr-50"
                @tap="setCacheToForm">
            <text>确定</text>
          </view>
          <view class="border-2D8CF0 w-120 h-60 border-box color-2D8CF0 fz-28 text-center lh-60 br-5"
                @tap="doNotSetCache">
            <text>取消</text>
          </view>
        </view>
      </view>
    </u-modal>

    <!--仍然有图片未上传成功(挂起)-->
    <u-modal v-model="isHangupContinue" :show-confirm-button="false" :show-title="false" border-radius="20"
            mask-close-able>
      <view class="w-full flex flex-column align-center p-lr-50">
        <view class="lh-center color-333 fz-30 fw-700 p-tb-42 border-bottom-CCCCCC w-full">仍有照片未上传成功，是否继续？</view>
        <view class="flex align-center justify-center m-tb-50">
          <view class="border-2D8CF0 w-120 h-60 border-box color-fff bg-2D8CF0 fz-28 text-center lh-60 br-5 mr-50"
                @tap="hangupCallback">
            <text>确定</text>
          </view>
          <view class="border-2D8CF0 w-120 h-60 border-box color-2D8CF0 fz-28 text-center lh-60 br-5"
                @tap="isHangupContinue=false">
            <text>取消</text>
          </view>
        </view>
      </view>
    </u-modal>
    <!--仍然有图片未上传成功(完成)-->
    <u-modal v-model="isDoneContinue" :show-confirm-button="false" :show-title="false" border-radius="20"
             mask-close-able>
      <view class="w-full flex flex-column align-center p-lr-50">
        <view class="lh-center color-333 fz-30 fw-700 p-tb-42 border-bottom-CCCCCC w-full">仍有照片未上传成功，是否继续？</view>
        <view class="flex align-center justify-center m-tb-50">
          <view class="border-2D8CF0 w-120 h-60 border-box color-fff bg-2D8CF0 fz-28 text-center lh-60 br-5 mr-50"
                @tap="fixDoneCallback">
            <text>确定</text>
          </view>
          <view class="border-2D8CF0 w-120 h-60 border-box color-2D8CF0 fz-28 text-center lh-60 br-5"
                @tap="isDoneContinue=false">
            <text>取消</text>
          </view>
        </view>
      </view>
    </u-modal>

  </view>
</template>

<script >
import config from '@/config'
import dayjs from '@/libs/dayjs.min.js'
import uploadMaskImg from "@/mixins/uploadMaskImg";
import getNavBarHeight from "@/mixins/getNavBarHeight";

import CollapseItem from "./components/CollapseItem.vue";
import EmptyIcon from "../../components/EmptyIcon/EmptyIcon";

import { workOrderDetail, workOrderHoldUp, workOrderNeedHelp,workOrderFinish ,workOrderTransfer } from "@/api/repair/workOrder";
import { getPartListByIds } from "@/api/spare/part";
import {mapGetters} from 'vuex'

export default {
  name: 'FixRecord',
  mixins: [uploadMaskImg, getNavBarHeight],
  components: { EmptyIcon, CollapseItem },
  data () {
    return {
      //缓存
      isUseCacheModal: false,
      cacheData: {},
      // uploadFailImgList:[],
      isHangupContinue: false,
      isDoneContinue: false,
      //数据提交提示弹框
      isShowMask: false,
      tipContent: '提交中...',
      //图片上传
      isUploading: false,
      photoFiles: [],

      //错误提示框
      errorShow: false,
      errorContent:'',
      //求助弹框
      helpModuleShow: false,
      //求助理由
      helpDetail: '',
      //求助提示弹框
      helpSecondStatus: false,
      //维修手册弹框
      fixBookModuleShow: false,
      //转交弹框
      transferModuleShow: false,
      //当前选择人员
      staffInfo:'',
      //备件列表
      recordPartList: [],
      //当前工单状态
      status: '',
      //工单数据详情
      workOrderInfo: {
        content:''
      },
      workOrderId:'',
      hospitalId:''
    }
  },
  onLoad (options) {
    if(options.workOrderId){
      this.workOrderId = options.workOrderId
    }
    if(options.hospitalId){
      this.hospitalId = options.hospitalId
    }
    this.cacheData = this.getFixCacheByWorkOrderId(this.workOrderId)
    this.doQuery()
  },
  computed:{
    ...mapGetters(['getFixCacheByWorkOrderId']),
    middleRecordPartList:{
      get(){
        return this.recordPartList
      },
      set(val){
      }
    },
    uploadFailImgList() {
      if (!Array.isArray(this.photoFiles)) {return []}
      return this.photoFiles.filter(item => !item.ossId)
    },
    portionData(){
      const unCodeList = this.middleRecordPartList.map(item=>{
        return {
          operNum : item.operNum,
          partId:item.partId
        }
      })
      const codeList = this.middleRecordPartList.reduce( (acc, cur) =>{
        const partList = cur.partList.map(item=>{
          return { ...item, partId:cur.partId }
        })
        acc.push(...partList)
        return acc
      },[]);
      return {
        ossIdList: this.photoFiles.map(e=>e.ossId).filter(el => el),
        recordPartList: [...unCodeList,...codeList],
      }
    },
    newBarCodeisNotEmpty(){
      return this.middleRecordPartList.every(el=>{
        return el.partList.every(part=>!!part.newSpareBarcode || !!part.oldSpareBarcode)
      })
    }
  },

  methods: {
    scanOld(part){
      uni.scanCode({
        scanType: ['barCode'],
        success: function (res) {
          part.oldSpareBarcode = res.result || ''
        }
      });
    },
    scanNew(part){
      uni.scanCode({
        scanType: ['barCode'],
        success: function (res) {
          part.newSpareBarcode = res.result || ''
        }
      });
    },
    //构建接口所需的数据
    composeSubmitData () {
      return {
        ...this.workOrderInfo,
        ...this.portionData
      }
    },

    doQuery () {
      uni.showLoading({title: '加载中...'})
      workOrderDetail(this.workOrderId).then(res=>{
        this.workOrderInfo = {...this.workOrderInfo , ...res.data}
        const files = res.data.recordImageList
        this.photoFiles = [ ...this.photoFiles].concat(files)
      }).then(res=>{
        return getPartListByIds({ids: Array.from(new Set(this.workOrderInfo.recordPartList.map(item => item.partId))).join(',')}).then(res => {
          this.recordPartList = res.data.map(item => {
            const partList = this.workOrderInfo.recordPartList.filter(partInfo=>partInfo.partId===item.partId)
            const operNum = partList.find(partInfo => partInfo.operNum !==null )?.operNum || 0
            const barcodePart = partList.filter(partInfo=> partInfo.newSpareBarcode!==null || partInfo.oldSpareBarcode!==null)
            return {
              operNum: operNum ,
              partList: barcodePart,
              partId:item.partId,
              partName:item.partName,
              partNo:item.partNo,
              isUniqueCode:item.isUniqueCode,
              barcodeStock:item.barcodeStock,
              normalStock:item.normalStock,
            }
          })
        })
      }).finally(()=>{
        uni.hideLoading()
        const cacheData = this.cacheData
        if(cacheData && (cacheData.content || cacheData.recordPartList.length>0 || cacheData.photoFiles.length>0)){
          this.isUseCacheModal = true
        }
      })
    },
    //非条形码数量减少
    down (item) {
      if(item.operNum===0)return;
      //操作一条，库存加一条
      item.operNum -=1
      item.normalStock += 1
      },
    //非条形码数量增加
    up (item) {
      if(item.normalStock <= 0)return;
      //操作一条，库存减一条
      item.operNum +=1
      item.normalStock -= 1
    },
    //删除条形码
    removeSpareCode (index,item,collapseIdx) {
      item.partList.splice(index, 1)
      this.$nextTick(() => {
        this.$refs['collapse' + collapseIdx][0].calcHeight()
      })
    },
    // 新增条形码
    addSpareCode(index,item) {
      if(item.partList.length>=item.barcodeStock){
        this.errorShow = true
        this.errorContent = '条形码库存量为'+item.barcodeStock
      }else{
        item.partList.push({
          oldSpareBarcode:'',
          newSpareBarcode:''
        })
        this.$nextTick(() => {
          this.$refs['collapse' + index][0].calcHeight()
        })
      }
    },
    //选择备件
    chooseSpare () {
      uni.navigateTo({
        url: '/pages/repair/choose-part',
        events: {
          confirm: (selection) => {
            const list = selection.map(item=>{
              return {
                partId:item.partId,
                partName:item.partName,
                partNo:item.partNo,
                isUniqueCode:item.isUniqueCode,
                barcodeStock:item.barcodeStock,
                normalStock:item.normalStock,
                operNum:item.operNum || 0,
                partList: item.partList || [],
              }
            })
            this.recordPartList = [...list]
          }
        },
        success: (res) => {
          res.eventChannel.emit('hospitalId', this.workOrderInfo.hospitalId)
          res.eventChannel.emit('companyId',  this.workOrderInfo.companyId)
          res.eventChannel.emit('selection', this.recordPartList)
        }
      })
    },

    //维修完成
    async fixDone () {
      if(!this.workOrderInfo.content){
        this.errorContent='维修内容不能为空！'
        this.errorShow = true
        return;
      }
      if(!this.newBarCodeisNotEmpty){
        uni.showToast({
          title: '备件-新条形码或旧条形码至少填写任意一个！',
          duration: 2000,
          icon : 'none'
        });
        return
      }
      await this.checkImgUpload()
      if(this.uploadFailImgList.length>0){
        //仍然有未上传成功的图片,是否继续
        this.isDoneContinue = true
      }else{
        this.fixDoneCallback()
      }
    },
    fixDoneCallback(){
      this.tipContent  = '提交中...'
      this.isShowMask = true
      const data = this.composeSubmitData()
      workOrderFinish(data).then(res=>{
        this.isShowMask = false
        this.requestSuccess(res)
      }).catch(res => {
        this.isShowMask = false
        this.requestTimeout(res)
      })
    },
    //挂起
    async hangup () {
      if(!this.newBarCodeisNotEmpty){
        uni.showToast({
          title: '备件-新条形码为必填项！',
          duration: 2000,
          icon : 'none'
        });
        return
      }
      await this.checkImgUpload()
      if(this.uploadFailImgList.length>0){
        //仍然有未上传成功的图片,是否继续
        this.isHangupContinue = true
      }else{
        this.hangupCallback()
      }
    },
    hangupCallback(){
      this.tipContent = '挂起中...'
      this.isShowMask = true
      const data = this.composeSubmitData()
      workOrderHoldUp(data).then(res => {
        this.isShowMask = false
        this.requestSuccess(res)
      }).catch(res => {
        this.isShowMask = false
        this.requestTimeout(res)
      })
    },

    //求助
    helpOpen () {
      this.helpSecondStatus = false
      this.helpModuleShow = true
    },
    helpCommit () {
      if(!this.helpDetail){
        this.errorContent = '求助理由不能空！'
        this.errorShow = true
        return
      }
      this.helpSecondStatus = true
    },
    //求助确认
    helpConfirm () {
      const data = this.composeSubmitData()
      data.reason = this.helpDetail
      this.isShowMask = true
      this.tipContent  = '提交中...'
      workOrderNeedHelp(data).then(res => {
        this.isShowMask = false
        this.helpClose()
        this.goBack()
      }).catch(() => {
        this.isShowMask = false
        this.helpClose()
      })
    },
    //求助内容输入框监听
    helpInput () {
    },
    //求助-关闭
    helpClose(){
      this.helpSecondStatus = false
      this.helpModuleShow = false
    },

    //维修内容输入框监听
    fixContentInput () { },
    //手册
    fixBookOpen () {
      this.fixBookModuleShow = true
    },
    fixBookCancel () {
      this.fixBookModuleShow = false
    },
    //转交
    transferOpen () {
      const data = this.composeSubmitData()
      uni.navigateTo({
          url: '/pages/repair/transfer-work',
          success: function(res) {
          res.eventChannel.emit('getWorkOrderInfo', { data: data })
        }
      })
    },
    transferCancel () {
      this.transferModuleShow = false
      this.staffInfo={}
    },
    transferConfirm () {
      const data = this.composeSubmitData()
      data.staffIds = this.staffInfo.staffId
      this.transferModuleShow = false
      this.tipContent  = '转交中...'
      this.isShowMask = true
      workOrderTransfer(data).then(res=>{
        this.isShowMask = false
        this.staffInfo={}
        this.goBack()
      }).finally(()=>{
        this.isShowMask = false
      })
    },

    //等待所有折叠项展开后隐藏mask
    collapseDone (index) {
      if(index + 1 === this.recordPartList.length){
        this.isShowMask = false
      }
    },

    // 上传图片
    uploadImage () {
      this.uploadMaskImg()
    },
    //水印内容
    maskContent (ctx, image) {
      ctx.strokeText(this.workOrderInfo.roomName || '-', image.width * 0.092, image.width * 0.18);
      ctx.fillText(this.workOrderInfo.roomName || '-', image.width * 0.092, image.width * 0.18)

      ctx.strokeText(this.$store.getters.staffName || '-', image.width * 0.092, image.width * 0.28);
      ctx.fillText(this.$store.getters.staffName || '-', image.width * 0.092, image.width * 0.28)

      ctx.strokeText(dayjs().format('YYYY-MM-DD HH:mm:ss'), image.width * 0.092, image.width * 0.33);
      ctx.fillText(dayjs().format('YYYY-MM-DD HH:mm:ss'), image.width * 0.092, image.width * 0.33)
    },

    uploadSuccessCallback (data) {
      this.photoFiles.push({
        url: data.data.url,
        ossId: data.data.ossId
      })
    },
    uploadTimeoutCallback (tempFile) {
      this.photoFiles.push({
        url: tempFile.tempFilePath,
        ossId: ''
      })
    },
    //检查是否有未上传的照片,并且更新照片列表
    checkImgUpload(){
      if (this.photoFiles.length === 0) {return Promise.resolve()}
      return Promise.all(this.photoFiles.map(item => {
        if (!!item.ossId) {return Promise.resolve(item)}
        return new Promise((resolve) => {
          uni.uploadFile({
            url: config.baseUrl + '/system/oss/upload',
            filePath: item.url,
            name: 'file',
            header: { Authorization: 'Bearer ' + this.$store.getters.token },
            success: (uploadFileRes) => {
              const data = JSON.parse(uploadFileRes.data)
              resolve({
                url: data.data.url,
                ossId: data.data.ossId,
              })
            },
            fail: () => {resolve(item)}
          })
        })
      })).then(photoFiles => {
        this.photoFiles = photoFiles
        return Promise.resolve(photoFiles)
      })
    },
    requestSuccess(res){
      if(res.code===200){
        this.$store.dispatch('removeCacheOfWorkOrderId',this.workOrderInfo.workOrderId )
        this.goBack()
      }
    },
    requestTimeout(res){
      const msg = res.errMsg || res.msg
      if(msg.indexOf("timeout") !== -1){
        this.setStorage()
      }
    },
    doNotSetCache(){
      this.isUseCacheModal = false
      this.cacheData = {}
    },
    setCacheToForm(){
      this.isUseCacheModal = false
      const cacheData = this.cacheData
      if(cacheData.content){
        this.workOrderInfo.content = cacheData.content
      }
      if(cacheData.photoFiles.length>0){
        this.photoFiles = JSON.parse(JSON.stringify(cacheData.photoFiles))
      }
      if(cacheData.recordPartList.length>0){
        this.recordPartList = cacheData.recordPartList
      }
    },
    setStorage(){
      const cacheData = {
        content: this.workOrderInfo.content,
        photoFiles : this.photoFiles,
        recordPartList: this.recordPartList
      }
      this.$store.dispatch('setFixCacheOfWorkOrderId',{ id : this.workOrderId, cacheData})
      .catch(res=>{})
    },
    // 点击预览
    previewImage (e) {
      const current = e.currentTarget.dataset.cur;
      const urls = this.photoFiles.map((el) => el.url)
      uni.previewImage({
        current: current,
        urls: urls,
        indicator: "none",
      });
    },
    // 删除图片
    removeImage (index) {
      this.photoFiles.splice(index, 1)
    },
    //返回到维修列表
    goBack(){
      this.$tab.switchTab('/pages/tabbar/repair/repair')
    }
  }
}

</script>

<style>
page {
  background-color: #fff;
}
</style>
<style lang="scss" scoped>
/deep/ .u-collapse-head {
  margin-bottom: 0 !important;
  border-bottom: 1px solid #ccc;
  padding: 0 !important;
  padding-bottom: 30rpx !important;
  padding-top: 20rpx !important;
}

.border-right-888 {
  box-sizing: content-box;
  border-right: 2rpx solid #888;
}

.border-left-888 {
  box-sizing: content-box;
  border-left: 2rpx solid #888
}

.color-1582F5 {
  color: #1582F5
}

.tool {
  box-shadow: 0rpx 2rpx 9rpx 1rpx rgba(51, 51, 51, 0.2);
  border-radius: 50%;
}
</style>
